KFE 第42期

一周推荐

如何编写轻量级 CSS 框架

各种各样的CSS框架层出不穷，稍微大点的，功能不能完全用上，小的功能却有可能不能满足自己的需求，何不动手自己编写自己的一个轻量级CSS框架

CSS 轻量CSS框架

使用浏览器开发者工具检查CSS动画性能

仅使用CSS的Opacity，Transforms 和Filters用于动画效果，才可以做出比较顺滑的动画。

CSS CSS动画

ECMAScript规范中定义了null == undefined会返回true。undefined表示一个变量最原始的状态，而非人为的操作的结果。JavaScript 中的函数都有返回值，当没有 return 操作时，就默认返回一个原始的状态值，这个值就是 undefined，表明函数的返回值未被定义。
而null表示一个对象被人为的重置为空对象，而非一个变量最原始的状态。
所以，在实际使用过程中，为了保证变量所代表的语义，不要对一个变量显式的赋值 undefined，当需要释放一个对象时，直接赋值为 null 即可。

一周技能加油站

getBoundingClientRect介绍

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

应用场景：通过getBoundingClientRect判断元素是否在可视区域

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

参考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

https://div.io/topic/1400

一周挑战（每周提供一道面试题）

javascript中的浅拷贝和深拷贝？
简单的理解就是，浅拷贝和深拷贝只针对Object和Array这样复杂的对象，浅拷贝只复制一层对象的属性，而深拷贝则递归拷贝所有层级。

浅拷贝的实现
function shallowCopy(obj) {
    var newObj = {}
    for(var i in obj) {
        newObj[i] = obj[i]
    }
    
    return newObj
}
缺点是没有实现真正意义上的拷贝，如果源对象的子属性也是引用对象，所以实际上拷贝的是内存的一个引用地址，源对象的子属性发生修改也会作用到新的拷贝对象。

深拷贝的实现
function deepCopy(p, c) {
　var c = c || {};
　for (var i in p) {
　　if (typeof p[i] === 'object') {
　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　deepCopy(p[i], c[i]);
　　} else {
　　　c[i] = p[i];
　　}
　}
　return c;
}

一周段子

“妹，别哭啊，到底发生什么了？”
“唔唔，昨天我在你卧室睡觉，姐夫以为我是你，就把我给那个了。”
“妹，你为什么不叫呢？”
“太快了，还没来得及叫。”

文章整理来自互联网，不作商业用途，如侵权，请联系删除

K F E